我是如何将冗长的Grunt任务拆分的

写Grunt对于很多JS程序员来说，不像写JS，更像是写一堆配置代码，相信用过Grunt的人都深有体会，就拿一个简答的uglify任务举例：

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    task1: {
      src: 'src/task1.js',
      dest: 'build/task1.min.js'
    },
    task2: {
      src: 'src/task2.js',
      dest: 'build/task2.min.js'
    }
  }
});

随着项目复杂度提升，任务会越来越多，会有task3，task4...等等，uglify的配置就显得非常冗长，再加上less，coffee等任务，也会有很多个task，最后Gruntfile.js越来越长，越来越难以维护。

这时候就想到，如果能够将每个task拆分出来成为单独的模块，单独的js文件，执行grunt的时候再将这些模块合并输出传给grunt.initConfig，每个任务的调理就会清晰很多，Gruntfile.js也不会很长，用一个tasks文件夹来存放每个task模块，目录结构如下：

theProject/
|
|------Gruntfile.js
|------tasks
|        |-task1.js
|        |-task2.js
|        |-task3.js
| 

在task1.js中，配置task1对应的grunt任务：

module.exports = function(grunt) {

  // 加载grunt依赖
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-less');

  // 注册task1任务
  grunt.registerTask('task1', [
    'uglify:task1',
    'less:task1'
  ]);

  gruntConfig = {
    uglify: {
      task1: {
        src: 'src/task1.js',
        dest: 'build/task1.min.js'
      }
    },
    less: {
      task1: {
        src: 'src/task1.less',
        dest: 'build/task1.css'
      }
    }
  };

  return gruntConfig;
};

这样每一个grunt任务就从统一的Gruntfile.js拆分开来，对应一个task模块，接下来就是重写Gruntfile.js，让它能够合并所有任务模块，再配置到grunt.initConfig中去。

具体实现方法就不多说了，重点是每个task模块中的gruntConfig配置对象能够深度合并，合并后传给grunt.initConfig。

有兴趣的同学可以看看我在Github的这个小项目，可以不关心具体实现，clone到自己项目中直接使用，兼容了coffee和js。

当我把它用到工作项目中，写grunt舒服了太多，再也不比辛辛苦苦拖上拖下找代码了。

另外，啰嗦一句，Grunt提供了很多有用的工具方法，却经常被我们忽略，可以在官网看到。